<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/c/CodingLabYT-->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <!--<title> Login and Registration Form in HTML & CSS | CodingLab </title>-->
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="container">
    <input type="checkbox" id="flip">
    <div class="cover">
      <div class="front">
        <img src="https://kisynergy.oss-cn-beijing.aliyuncs.com/IMG_1129(20230202-142659).JPG"/>
        <!--
        <div class="text">
          <span class="text-1">Every new friend is a <br> new adventure</span>
          <span class="text-2">Let's get connected</span>
        </div>
        -->
      </div>
      <!--
      <div class="back">
        <img class="backImg" src="Images/backImg.jpg" alt="">
        <div class="text">
          <span class="text-1">Complete miles of journey <br> with one step</span>
          <span class="text-2">Let's get started</span>
        </div>
      </div>
      -->
    </div>
    <div class="forms">
        <div class="form-content">
          <div class="login-form">
            <div class="title" >登录</div>
          <form action="#">
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" id = "mail" placeholder="输入你的邮箱" required>
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="password" id = "pwd" placeholder="输入密码" required>
              </div>
              <div class="text"><a href="#">忘记密码?</a></div>
              <div class="button input-box" id="LgIn">
                <input type="submit" value="登录">
              </div>
              <div class="text sign-up-text">没有账户? <label for="flip">点此创建</label></div>
            </div>
        </form>
      </div>
        <div class="signup-form">
          <div class="title" >注册</div>
        <form action="#"><!--在提交表单时向某一文件发送数据，以达到收集用户信息的目的(具体还未实现)-->
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-user"></i>
                <input type="text" id = "name" placeholder="请输入你的名字" required>
              </div>
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" id = "grade" placeholder="请输入期数" required>
              </div>
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" id = "direction" placeholder="请输入方向" required>
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="text" id = "userid" placeholder="请输入邮箱" required>
              </div>
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="password" id = "password" placeholder="请输入密码" required>
              </div>
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" id = "invitation" placeholder="请输入邀请码" required>
              </div>
             <div class="button input-box" id="FgIn">
                <input type="submit" value="注册">
              </div>
              <div class="text sign-up-text">已经有账户了? <label for="flip">现在登录</label></div>
            </div>
      </form>
      </div>
    </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script type="text/javascript">
        const mail = document.getElementById("mail");
        const pwd = document.getElementById("pwd");
        const name = document.getElementById("name");
        const grade = document.getElementById("grade");
        const direction = document.getElementById("direction");
        const userid = document.getElementById("userid");
        const password = document.getElementById("password");
        const invitation = document.getElementById("invitation");
        const LgIn = document.getElementById("LgIn");
        const FgIn = document.getElementById("FgIn");
        //点击登录按钮发送登录请求
        axios.defaults.baseURL = 'http://4n4zfk.natappfree.cc/yunchenbooksmanagementsystem_war/';
        LgIn.onclick = function(){
          console.log("哈哈哈");
          axios({
              url:'LoginServlet',
              method: 'POST',
              data:{
                userid:`${mail.value}`,
                password:`${pwd.value}`
              }
          }).then((res) => {
            alert(res.data.message);
             console.log(res);
             
             if (res.data.code == "0") {
              setTimeout(function () {window.open("管理员界面.html","_self")}, 1000);
              ;
             }
             if (res.data.code == "1") {setTimeout(function () {window.open("用户界面.html","_self")}, 1000);
              localStorage.setItem("userID",res.data.name);
           }

          })

        }
        //点击注册按钮发送注册请求
        FgIn.addEventListener("click",() =>{

          axios({
              url:'RegisterServlet',
              method: 'POST',
              data:{
                name:`${name.value}`, 
                grade:`${grade.value}`,
                direction:`${direction.value}`,
                userid:`${userid.value}`,
                password:`${password.value}`,
                invitation:`${invitation.value}`
              }
          }).then(function(res){
              alert(res.data.message);
             console.log(res);
              if (res.data.code == "2") {setTimeout(function () {window.open("index.html","_self")}, 1000);}
          })

        })
  </script>
</body>
</html>
